import {HTMLProps, useEffect, useState} from "react";
import AppProvider from "../sources/AppProvider.ts";
import DGFadeView from "../components/DGFadeView.tsx";
import ReactMarkdown from "react-markdown";
import {Box} from "@mui/material";
import DGFooterView from "../components/DGFooterView/DGFooterView.tsx";

const DGAgree2 = () => {
    const App = AppProvider.useAppContext();

    const [content, setContent] = useState("");

    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (App) App.setTitle("隐私政策");
    }, [App]);

    const comp = {
        p: (props: HTMLProps<HTMLParagraphElement>) => (
            <p style={{margin: "1em 0", lineHeight: "1.8em"}} {...props}/>),
        ul: (props: HTMLProps<HTMLUListElement>) => (<ul style={{marginLeft: "15px"}} {...props}/>),
        li: (props: HTMLProps<HTMLLIElement>) => (<li style={{margin: "0.8em 0", lineHeight: "1.8em"}} {...props}/>),
        h2: (props: HTMLProps<HTMLParagraphElement>) => (<h2 style={{margin: "1em 0"}} {...props}/>),
        h3: (props: HTMLProps<HTMLParagraphElement>) => (<h3 style={{margin: "1em 0"}} {...props}/>),
    }
    useEffect(() => {
        fetch('/services/Agree2.md')
            .then((res) => res.text())
            .then((txt) => setContent(txt));
    }, []);

    useEffect(() => {
        if (content.length > 0) setTimeout(() => setLoading(false), 1000);
    }, [content.length]);

    return (<DGFadeView time={1000} load={loading}>
        <Box style={{margin: "20px"}}><ReactMarkdown components={comp}>{content}</ReactMarkdown></Box>
        {/* 网站底部 */}
        <DGFooterView/>
    </DGFadeView>);
}

export default DGAgree2;